<template>
  <view class="calendar-container">
    <!-- 顶部色块说明区域 -->
    <view class="color-legend">
      <view class="legend-item">
        <view class="color-block eating"></view>
        <text>吃饭</text>
      </view>
      <view class="legend-item">
        <view class="color-block accommodation"></view>
        <text>住宿</text>
      </view>
      <view class="legend-item">
        <view class="color-block transportation"></view>
        <text>交通</text>
      </view>
      <view class="legend-item">
        <view class="color-block entertainment"></view>
        <text>游玩</text>
      </view>
      <view class="legend-item">
        <view class="color-block other"></view>
        <text>其他</text>
      </view>
    </view>

    <!-- 主体区域 -->
    <view class="calendar-main">
      <!-- 固定的日期头部 -->
      <view class="fixed-header">
        <view class="time-scale-header"></view>
        <scroll-view class="date-headers-scroll" scroll-x :scroll-left="scrollLeft" scroll-with-animation="true">
          <view class="date-headers">
            <view class="date-header" v-for="(date, index) in dates" :key="index">
              {{ formatDate(date) }}
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 可滚动的内容区域 -->
      <scroll-view class="calendar-body" scroll-y>
        <view class="calendar-content">
          <!-- 左侧时间刻度 -->
          <view class="time-scale">
            <view class="time-scale-content">
              <view class="time-item" v-for="hour in 24" :key="hour">
                {{ formatHour(hour - 1) }}
              </view>
            </view>
          </view>

          <!-- 右侧日程表 -->
          <scroll-view 
            class="schedule-container" 
            scroll-x 
            @scroll="handleHorizontalScroll" 
            :scroll-left="scrollLeft"
            scroll-with-animation="true"
          >
            <!-- 日程列内容 -->
            <view class="schedule-columns">
              <view class="schedule-column" v-for="(date, dateIndex) in dates" :key="dateIndex">
                <!-- 每个时间单位（0.5小时） -->
                <view 
                  class="time-unit" 
                  v-for="(unit, unitIndex) in timeUnits" 
                  :key="unitIndex"
                  :class="getActivityClass(dateIndex, unitIndex)"
                ></view>
              </view>
            </view>
          </scroll-view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scrollLeft: 0,
      // 示例日期数据（可以根据实际需求动态生成）
      dates: [
        { month: 7, day: 1 },
        { month: 7, day: 2 },
        { month: 7, day: 3 },
        { month: 7, day: 4 },
        { month: 7, day: 5 },
        { month: 7, day: 6 },
        { month: 7, day: 7 },
        { month: 7, day: 8 },
        { month: 7, day: 9 },
        { month: 7, day: 10 }
      ],
      // 每天的时间单位（48个单位，每单位0.5小时）
      timeUnits: Array(48).fill(null),
      // 示例活动数据（实际应用中可能从API获取）
      activities: [
        { date: 0, startUnit: 14, endUnit: 18, type: 'eating' },        // 7月1日 7:00-9:00 吃饭
        { date: 0, startUnit: 20, endUnit: 36, type: 'accommodation' }, // 7月1日 10:00-18:00 住宿
        { date: 1, startUnit: 8, endUnit: 12, type: 'transportation' }, // 7月2日 4:00-6:00 交通
        { date: 1, startUnit: 16, endUnit: 28, type: 'entertainment' }, // 7月2日 8:00-14:00 游玩
        { date: 2, startUnit: 10, endUnit: 14, type: 'other' },         // 7月3日 5:00-7:00 其他
        { date: 3, startUnit: 30, endUnit: 40, type: 'eating' },        // 7月4日 15:00-20:00 吃饭
        { date: 4, startUnit: 6, endUnit: 10, type: 'transportation' }, // 7月5日 3:00-5:00 交通
        { date: 4, startUnit: 12, endUnit: 24, type: 'entertainment' }, // 7月5日 6:00-12:00 游玩
        { date: 5, startUnit: 28, endUnit: 32, type: 'eating' },        // 7月6日 14:00-16:00 吃饭
        { date: 6, startUnit: 40, endUnit: 48, type: 'accommodation' }, // 7月7日 20:00-24:00 住宿
        { date: 7, startUnit: 0, endUnit: 8, type: 'accommodation' },   // 7月8日 0:00-4:00 住宿（接上一天）
        { date: 8, startUnit: 20, endUnit: 26, type: 'other' },         // 7月9日 10:00-13:00 其他
        { date: 9, startUnit: 18, endUnit: 22, type: 'eating' },        // 7月10日 9:00-11:00 吃饭
      ]
    };
  },
  methods: {
    // 格式化小时显示（24小时制）
    formatHour(hour) {
      return hour.toString().padStart(2, '0') + ':00';
    },
    
    // 格式化日期显示
    formatDate(date) {
      return `${date.month}月${date.day}日`;
    },
    
    // 处理水平滚动事件
    handleHorizontalScroll(e) {
      this.scrollLeft = e.detail.scrollLeft;
    },
    
    // 获取活动类型的CSS类
    getActivityClass(dateIndex, unitIndex) {
      const activity = this.activities.find(a => 
        a.date === dateIndex && 
        unitIndex >= a.startUnit && 
        unitIndex < a.endUnit
      );
      
      return activity ? activity.type : '';
    }
  },
  // 在组件挂载后初始化数据
  mounted() {
    // 这里可以添加从API获取数据的逻辑
    console.log('日历组件已挂载');
  }
};
</script>

<style>
.calendar-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8f8f8;
}

/* 顶部色块说明区域样式 */
.color-legend {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50rpx;
  padding: 10rpx 0;
  background-color: #ffffff;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
  z-index: 20;
}

/* 日历主体区域 */
.calendar-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 固定头部区域 */
.fixed-header {
  display: flex;
  height: 50rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #e0e0e0;
  z-index: 15;
}

.time-scale-header {
  width: 50rpx;
  flex-shrink: 0;
  background-color: #f0f0f0;
  border-right: 1rpx solid #e0e0e0;
}

.date-headers-scroll {
  flex: 1;
  white-space: nowrap;
}

.date-headers {
  display: flex;
}

.date-header {
  width: 200rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: bold;
  border-left: 1rpx solid #e0e0e0;
  background-color: #f8f8f8;
}

.legend-item {
  display: flex;
  align-items: center;
}

.color-block {
  width: 20rpx;
  height: 20rpx;
  margin-right: 6rpx;
  border-radius: 4rpx;
}

.eating {
  background-color: #4CAF50; /* 绿色 - 吃饭 */
}

.accommodation {
  background-color: #9C27B0; /* 紫色 - 住宿 */
}

.transportation {
  background-color: #FFC107; /* 黄色 - 交通 */
}

.entertainment {
  background-color: #F44336; /* 红色 - 游玩 */
}

.other {
  background-color: #9E9E9E; /* 灰色 - 其他 */
}

/* 主体区域样式 */
.calendar-body {
  flex: 1;
  overflow: hidden;
}

.calendar-content {
  display: flex;
  min-height: 100%;
}

/* 左侧时间刻度样式 */
.time-scale {
  width: 50rpx;
  flex-shrink: 0;
  background-color: #f0f0f0;
  position: sticky;
  left: 0;
  z-index: 10;
  height: 100%;
  border-right: 1rpx solid #e0e0e0;
}

.time-scale-content {
  position: relative;
  height: 100%;
}

.time-item {
  height: 30rpx; /* 符合需求文档的高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16rpx;
  color: #666;
  position: absolute;
  width: 100%;
  left: 0;
}

/* 定位每个时间刻度，使其与时间单位对齐 */
.time-item:nth-child(1) { top: 0; }
.time-item:nth-child(2) { top: 100rpx; } /* 2个时间单位 = 100rpx */
.time-item:nth-child(3) { top: 200rpx; }
.time-item:nth-child(4) { top: 300rpx; }
.time-item:nth-child(5) { top: 400rpx; }
.time-item:nth-child(6) { top: 500rpx; }
.time-item:nth-child(7) { top: 600rpx; }
.time-item:nth-child(8) { top: 700rpx; }
.time-item:nth-child(9) { top: 800rpx; }
.time-item:nth-child(10) { top: 900rpx; }
.time-item:nth-child(11) { top: 1000rpx; }
.time-item:nth-child(12) { top: 1100rpx; }
.time-item:nth-child(13) { top: 1200rpx; }
.time-item:nth-child(14) { top: 1300rpx; }
.time-item:nth-child(15) { top: 1400rpx; }
.time-item:nth-child(16) { top: 1500rpx; }
.time-item:nth-child(17) { top: 1600rpx; }
.time-item:nth-child(18) { top: 1700rpx; }
.time-item:nth-child(19) { top: 1800rpx; }
.time-item:nth-child(20) { top: 1900rpx; }
.time-item:nth-child(21) { top: 2000rpx; }
.time-item:nth-child(22) { top: 2100rpx; }
.time-item:nth-child(23) { top: 2200rpx; }
.time-item:nth-child(24) { top: 2300rpx; }

/* 右侧日程表样式 */
.schedule-container {
  flex: 1;
  position: relative;
  white-space: nowrap;
}

.schedule-columns {
  display: flex;
}

.schedule-column {
  width: 200rpx;
  display: inline-block;
  border-left: 1rpx solid #e0e0e0;
}

.time-unit {
  height: 50rpx; /* 每0.5小时的高度 */
  border-bottom: 1rpx solid #f0f0f0;
  box-sizing: border-box;
}

/* 确保时间单位的总高度与时间刻度匹配 */
.time-unit:nth-child(2n) {
  border-bottom: 1rpx solid #e0e0e0;
}

/* 活动样式增强 */
.time-unit.eating,
.time-unit.accommodation,
.time-unit.transportation,
.time-unit.entertainment,
.time-unit.other {
  border-left: 3rpx solid rgba(0, 0, 0, 0.2);
  border-right: 3rpx solid rgba(0, 0, 0, 0.2);
}

/* 活动的开始和结束样式 */
.time-unit.eating:first-of-type,
.time-unit.accommodation:first-of-type,
.time-unit.transportation:first-of-type,
.time-unit.entertainment:first-of-type,
.time-unit.other:first-of-type {
  border-top: 3rpx solid rgba(0, 0, 0, 0.2);
  border-top-left-radius: 4rpx;
  border-top-right-radius: 4rpx;
}

.time-unit.eating:last-of-type,
.time-unit.accommodation:last-of-type,
.time-unit.transportation:last-of-type,
.time-unit.entertainment:last-of-type,
.time-unit.other:last-of-type {
  border-bottom: 3rpx solid rgba(0, 0, 0, 0.2);
  border-bottom-left-radius: 4rpx;
  border-bottom-right-radius: 4rpx;
}

/* 响应式调整 */
@media screen and (max-width: 375px) {
  .date-header {
    width: 150rpx;
  }
  
  .schedule-column {
    width: 150rpx;
  }
}
</style>
